react-native-google-map-autocomplete やってみる

#ReactNative

概要

公式ページに従えば絶対に動く

ポイントは「Places API（Web）の有効化」「GCPプロジェクトのアカウント請求先の設定」「API Key作成」の3つ。

請求先の設定が少し躓くかも。ちゃんと調べて設定なさい。

memo.iconログ

note.iconまずは再度文献を読み漁る

公式ページがある -> react-native-google-places-autocomplete - npm

https://raw.githubusercontent.com/FaridSafi/react-native-google-places-autocomplete/master/Assets/screenshot.png

利用イメージは上の画像

利用方法

Step1 yarn add react-native-google-places-autocomplete

Step2

Get your Google Places API keys and enable "Google Places API Web Service" (NOT Android or iOS) in the console. Billing must be enabled on the account.

Step3

Enable "Google Maps Geocoding API" if you want to use GoogleReverseGeocoding for Current Location

note.iconまずはインストールして、動作するのかどうかを確認

Step1のyarn add react-native-google-places-autocompleteはインストールするだけ

Step1.1として、「Google Cloud PlatformのProjectの作成」の必要あり。今回はbike mapという名前のプロジェクトを作成。

Step2は「Places API（Web用のやつ。iOS, Androidじゃない）を有効化」しろって意味。

Step2.1として、「API Keyの作成」をする必要あり

Step2.2として、「projectの請求先アカウントの設定」をする必要あり

Step3は無視した。「現在地の取得」で必要らしい。今は無視で。

Step4で簡単なコードを実行してみる（API Keyの値は変更すべし）

code: js

import React from 'react';

import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

const GooglePlacesInput = () => {

return (

<GooglePlacesAutocomplete

placeholder='Search'

onPress={(data, details = null) => {

// 'details' is provided when fetchDetails = true

console.log(data, details);

}}

query={{

key: 'YOUR API KEY',

language: 'en',

}}

);

};

export default GooglePlacesInput;

このステップを踏めば絶対に動く！！！